<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部高斯模糊演示</title>
    <style>
.container img {
    display: block;
    width: 384px; height: 512px;
    user-select: none;
}
.container {
    width: 384px;
    position: relative;
}
.cover {
    position: absolute;
    left: 20px; top: 20px;
    width: 240px; height: 120px;
    border: 2px solid yellow;
    cursor: move;
}
    </style>
</head>
<body>
    <h3>原始图像</h3>
    <img src="./example.jpg" id="source" alt="原始图像" width="384" height="512">

    <h3>设置</h3>
    <p>移动框选范围：</p>
    <div class="container">
        <i id="cover" class="cover"></i>
        <img src="./example.jpg" alt="原始图像" width="384" height="512">
    </div>
    <p>模糊大小（0-40）：<input type="range" id="range" min="0" max="40" value="10"></p>

    <h3>输出效果</h3>
    <canvas id="output"></canvas>

<script src="./localBlur.js"></script>
<script>        
var blur = 10;
var bounding = [20,20,240,120];
// 执行模糊绘制方法
var drawBlur = function () {
    localBlur(source, blur, bounding, output);
};

range.addEventListener('change', function () {
    blur = this.value;

    drawBlur();
});


var store = {};
cover.addEventListener('mousedown', function (event) {
    store.y = event.pageY;
    store.x = event.pageX;
    store.isMoving = true;
    store.top = parseFloat(getComputedStyle(cover).top) || 0;
    store.left = parseFloat(getComputedStyle(cover).left) || 0;
});
document.addEventListener('mousemove', function (event) {
    if (store.isMoving) {
        event.preventDefault();

        var distanceY = event.pageY - store.y;
        var distanceX = event.pageX - store.x;
        var top = store.top + distanceY;
        var left = store.left + distanceX;

        if (top < 0) {
            top = 0;
        } else if (top + cover.offsetHeight > cover.parentElement.clientHeight) {
            top = cover.parentElement.clientHeight - cover.offsetHeight;
        }

        if (left < 0) {
            left = 0;
        } else if (left + cover.offsetWidth > cover.parentElement.clientWidth) {
            left = cover.parentElement.clientWidth - cover.offsetWidth;
        }

        cover.style.top = top + 'px';
        cover.style.left = left + 'px';

        bounding = [left, top, 200, 100]
    }
});
document.addEventListener('mouseup', function () {
    if (store.isMoving) {
        store.isMoving = false;

        drawBlur();
    }            
});

// 进来就先执行一遍
drawBlur();
</script>
</body>
</html>